{% macro print_readout(readout, locale=None, max_rows=10, product=None) %}
  {% if not readout.hide_readout %}
    <details class="h2" open="open">
      <summary class="with-mode-selectors">
        <a id="{{ readout.slug }}">{{ readout.title }}</a>
      </summary>
      <ul class="readout-modes" data-slug="{{ readout.slug }}">
        {% for key, name in readout.modes %}
          <li class="mode{% if key == readout.default_mode %} active
          {% endif %}" data-url="{{ url('dashboards.wiki_rows',
                  readout.slug)|urlparams(max=max_rows, mode=key, locale=locale, product=product.slug) }}">
            <a href="#">{{ name }}</a>
          </li>
        {% endfor %}
      </ul>
      {% if readout.description %}
        <p>
          {{ readout.description }}
        </p>
      {% endif %}
      <table class="documents" id="{{ readout.slug }}-table">
        {{ readout.render(max_rows=max_rows)|safe }}
      </table>
      <div class="table-footer">
        <a href="{{ readout.get_absolute_url(request.LANGUAGE_CODE, product) }}">{{ readout.details_link_text }}</a>
      </div>
    </details>
  {% endif %}
{% endmacro %}

{% macro overview_section(readouts, printed_rows) %}
{# printed_rows is a tuple of pairs, (row, should_color), like so:
  ((row1, True/False), (row2, True/False), ... etc) #}
  <details class="h2" open="open">
    <summary>{{ _('Overview') }}</summary>
    <table class="overview l10n-overview">
      {% for row, should_color in printed_rows %}
        {% if row.title == _('Top 100 Articles') %}
          <tr class="most-visited-row">
            <td class="row-title">
              {{ row.title }}
              <div>{{ row.description }}</div>
            </td>
            <td colspan="2">
              {% trans numerator=number(row.numerator), denominator=number(row.denominator) %}
                {{ numerator }} of {{ denominator }}
              {% endtrans %}
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <div class="percent-graph">
                <span>{{ row.percent }}%</span>
                <div style="width: {{ row.percent }}%"{% if should_color %} class="{{ 'best' if row.percent == 100 else ('better' if row.percent >= 20 else 'bad') }}"{% endif %}></div>
              </div>
            </td>
          </tr>
        {% else %}
          <tr>
            <td class="row-title">
              {{ row.title }}
              <div>{{ row.description }}</div>
            </td>
            <td>
              {% trans numerator=number(row.numerator), denominator=number(row.denominator) %}
                {{ numerator }}
                <small>of {{ denominator }}</small>
              {% endtrans %}
            </td>
            <td>
              {{ row.percent }}%
              <div class="percent-graph">
                <div style="width: {{ row.percent }}%"{% if should_color %} class="{{ 'best' if row.percent == 100 else ('better' if row.percent >= 20 else 'bad') }}"{% endif %}></div>
              </div>
            </td>
          </tr>
        {% endif %}
      {% endfor %}
      <tr class="ui-strings-row">
        <td class="row-title">
          {{ _('User Interface') }}
          <div>
            {% trans url=_('https://pontoon.mozilla.org/projects/sumo/', context='L10n: Link to a site with information on how to translate the UI into your language.') %}
              A fully translated user interface improves the experience for
              site visitors in your language. Help
              <a href="{{ url }}">translate the interface</a>.
            {% endtrans %}
          </div>
        </td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <div id="overview-options" class="choice-list">
      <label>{{ _('Jump to:') }}</label>
      <ul>
        {% for slug, readout in readouts.iteritems() if readout.short_title %}
          <li><a href="#{{ slug }}">{{ readout.short_title }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </details>
{% endmacro %}

{% macro print_checkbox_row(label,
                            on_default_locale,
                            is_watching_default,
                            is_watching_other,
                            watch_view,
                            unwatch_view,
                            default_locale,
                            show_default=True,
                            show_other=True,
                            product=None) %}
  <tr>
    <th class="state">{{ label }}</th>
    <td>
      {% if show_default %}
        {% if product %}
          {% set watch_url = url(watch_view, locale=default_locale, product=product.slug) %}
          {% set unwatch_url = url(unwatch_view, locale=default_locale, product=product.slug) %}
        {% else %}
          {% set watch_url = url(watch_view, locale=default_locale) %}
          {% set unwatch_url = url(unwatch_view, locale=default_locale) %}
        {% endif %}
        <input data-action-watch="{{ watch_url }}"
               data-action-unwatch="{{ unwatch_url }}"
               type="checkbox"
               {% if is_watching_default %}checked="checked"{% endif %} />
      {% endif %}
    </td>
    {% if not on_default_locale and show_other %}
      {% if product %}
        {% set watch_url = url(watch_view, product=product.slug) %}
        {% set unwatch_url = url(unwatch_view, product=product.slug) %}
      {% else %}
        {% set watch_url = url(watch_view) %}
        {% set unwatch_url = url(unwatch_view) %}
      {% endif %}
      <td>
        <input data-action-watch="{{ watch_url }}"
               data-action-unwatch="{{ unwatch_url }}"
               type="checkbox"
               {% if is_watching_other %}checked="checked"{% endif %} />
      </td>
    {% endif %}
  </tr>
{% endmacro %}

{% macro print_subscription_menu(default_locale_name,
                                 current_locale_name,
                                 on_default_locale,
                                 is_watching_default_locale,
                                 is_watching_other_locale,
                                 is_watching_default_approved,
                                 is_watching_other_approved,
                                 default_locale,
                                 show_default_waiting=True,
                                 show_default_approved=True,
                                 product=None) %}
  <div id="doc-watch">
    <button class="btn btn-submit popup-trigger" type="submit">
      <img src="{{ STATIC_URL }}sumo/img/blank.png" alt="" />
      {{ pgettext('l10n dashboard', 'Subscribe...') }}
    </button>
    <form class="popup-menu" action="" method="POST">
      {% csrf_token %}
      <table>
        <tr>
          <th />
          <th>{{ _(default_locale_name) }}</th>
          {% if not on_default_locale %}
            <th>{{ current_locale_name }}</th>
          {% endif %}
        </tr>
        {{ print_checkbox_row(_('Waiting for review'), on_default_locale, is_watching_default_locale, is_watching_other_locale, 'wiki.locale_watch', 'wiki.locale_unwatch', default_locale, show_default=show_default_waiting, product=product) }}
        {{ print_checkbox_row(_('Approved'), on_default_locale, is_watching_default_approved, is_watching_other_approved, 'wiki.approved_watch', 'wiki.approved_unwatch', default_locale, show_default=show_default_approved, product=product) }}
        {{ print_checkbox_row(_('Ready for localization'), on_default_locale, is_watching_default_ready, False, 'wiki.ready_watch', 'wiki.ready_unwatch', default_locale, show_other=False, product=product) }}
        <tr>
          <td colspan="3">
            <p class="note warning-box">
              {% if product %}
                {{ _('Please note that these selections are specific to the current product selected.') }}
              {% else %}
                {{ _('Please note that you will be subscribed to these notifications for all products. If you are only interested in specific products, please go to the dashboard for that product.') }}
              {% endif %}
            </p>
          </td>
        </tr>
      </table>
    </form>
  </div>
{% endmacro %}

{% macro product_selector(products, current) %}
  <div id="product-selector">
    <select>
      <option value="">{{ _('All Products') }}</option>
      {% for p in products %}
        <option value="{{ p.slug }}" {% if current == p %}selected="selected"{% endif %}>
          {{ pgettext('DB: products.Product.title', p.title) }}
        </option>
      {% endfor %}
    </select>
  </div>
{% endmacro %}

{% macro product_choice_list(products, current, url_) %}
  <div class="product-picker-dd">
    <div class="current">
      <span class="dd-btn"><img src="{{ STATIC_URL }}sumo/img/dd-arrow.png" /></span>
      {% if current == None %}
        <img src="{{ STATIC_URL }}sumo/img/blank.png" class="logo-sprite small sumo">
        <span>{{ _('All Products') }}</span>
      {% else %}
        <img src="{{ current.image_url }}" class="logo-sprite small" alt="" />
        <span>{{ pgettext('DB: products.Product.title', current.title) }}</span>
      {% endif %}
    </div>
    <ul>
      <li {{ current|class_selected(None) }}>
        <a href="{{ url_ }}">
          <img src="{{ STATIC_URL }}sumo/img/blank.png" class="logo-sprite small sumo">
          <span>{{ _('All Products') }}</span>
        </a>
      </li>
      {% for p in products %}
        <li {{ current|class_selected(p) }}>
          <a href="{{ url_|urlparams(product=p.slug, category=category) }}">
                <img src="{{ p.image_url }}" class="logo-sprite small" alt="" />
            <span>{{ pgettext('DB: products.Product.title', p.title) }}</span>
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro topic_selector(topics, current) %}
  <div id="topic-selector">
    <select>
      <option value="">{{ _('All Topics') }}</option>
      {% for t in topics %}
        <option value="{{ t.slug }}" {% if current == t %}selected="selected"{% endif %}>
          {{ pgettext('DB: products.Topic.title', t.title) }}
        </option>
      {% endfor %}
    </select>
  </div>
{% endmacro %}

{% macro category_filter() %}
  <div class="category-filter">
    <form method="get">
      {% if product %}
        <input type="hidden" name="product" value="{{ product }}">
      {% endif %}
      <label>{{ _('Filter by type:') }}</label>
      <select data-submit name="category">
        <option value="">{{ _('All') }}</option>
        {% for c in categories %}
          <option value="{{ c[0] }}" {% if category == c[0] %}selected="selected"{% endif %}>{{ c[1] }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
{% endmacro %}

{% macro localization_sidebar_nav(locale, active, is_default_locale=False) %}
  <ul class="sidebar-nav">
    <li {{ active|class_selected('dashboard') }}>
      {% if is_default_locale %}
        <a href="{{ url('dashboards.contributors') }}">{{ _('KB Dashboard') }}</a>
      {% else %}
        <a href="{{ url('dashboards.localization', locale=locale) }}">{{ _('Localization Dashboard') }}</a>
      {% endif %}
    </li>
    <li {{ active|class_selected('metrics') }}>
      <a href="{{ url('dashboards.locale_metrics', locale) }}">{{ _('Locale Metrics') }}</a>
    </li>
    <li {{ active|class_selected('team') }}>
      <a href="{{ url('wiki.locale_details', locale) }}">
        {% if is_default_locale %}
          {{ _('KB Team') }}
        {% else %}
          {{ _('Localization Team') }}
        {% endif %}
      </a>
    </li>
    <li {{ active|class_selected('revisions') }}>
      <a href="{{ url('wiki.revisions')|urlparams(locale=locale) }}">{{ _('Recent Revisions') }}</a>
    </li>
  </ul>
  <ul class="sidebar-nav">
    <li {{ active|class_selected('aggregated') }}>
      <a href="{{ url('dashboards.aggregated_metrics') }}">{{ _('Aggregated Metrics') }}</a>
    </li>
  </ul>
{% endmacro %}
